<template>
<div>
  <el-row>
    <el-col :span="24">
      <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>创建收款单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    </el-col>
  </el-row>
  <div style="height:20px;width:100%"></div>
  <div class="mainContainer addCompanyPage">
  <el-row>
  <div style="height:50px;width:100%"></div>
  <el-row :gutter="20">
    <el-col :span="20" :offset="3">
      <div class="grid-content bg-purple">
        <div class="grid-content bg-purple-light">
          <el-steps :active="active" finish-status="success">
            <el-step title="客户选择"></el-step>
            <el-step title="社保/公积金/商保"></el-step>
            <el-step title="薪酬个税"></el-step>
            <el-step title="附加费/服务费"></el-step>
          </el-steps>
          <el-form ref="form" :model="form" label-width="80px">
            <div v-if="active === 0">
              <div style="height:50px;width:100%"></div>
                  <el-form-item label="客户名称">
                      <el-input v-model="form.name" style="width: 100%;"></el-input>
                  </el-form-item>
                  <el-form-item label="结算业务">
                        <el-radio-group v-model="form.resource">
                          <el-radio label="薪酬个税"></el-radio>
                          <el-radio label="社保/公积金/商保"></el-radio>
                        </el-radio-group>
                  </el-form-item>
                  <el-form-item label="收款日期">
                        <el-date-picker type="date" placeholder="年/月/日" v-model="form.date1" style="width: 100%;"></el-date-picker>
                  </el-form-item>
            </div>
            <div v-if="active === 1">
              <div style="height:50px;width:100%"></div>
              <el-form-item label="类型选择">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox label="社保" name="type"></el-checkbox>
                  <el-checkbox label="公积金" name="type"></el-checkbox>
                  <el-checkbox label="商保" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="姓名">
                  <el-input v-model="form.username" style="width: 100%;"></el-input>
              </el-form-item>
              <el-form-item label="身份证号">
                  <el-input v-model="form.idcard" style="width: 100%;"></el-input>
              </el-form-item>
              <el-form-item label="方案名称">
                  <el-input v-model="form.plan" style="width: 100%;"></el-input>
              </el-form-item>
              <el-form-item label="基数">
                  <el-input v-model="form.base" style="width: 100%;"></el-input>
              </el-form-item>
              <el-form-item label="参保地">
                  <el-input v-model="form.area" style="width: 100%;"></el-input>
              </el-form-item>
              <el-form-item label="参保日期">   
                   <el-date-picker type="date" placeholder="年/月/日" v-model="form.date2" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </div>
            <div v-if="active === 2">
              <div style="height:50px;width:100%"></div>
              <el-form-item label="实发工资">
                  <el-input v-model="form.money" style="width: 100%;"></el-input>
              </el-form-item>
               <el-form-item label="发放月份">   
                   <el-date-picker type="date" placeholder="年/月/日" v-model="form.date3" style="width: 100%;"></el-date-picker>
              </el-form-item>
              <el-form-item label="发放银行">
                  <el-input v-model="form.bank" style="width: 100%;"></el-input>
              </el-form-item>
              <el-form-item label="账户名">
                  <el-input v-model="form.bankname" style="width: 100%;"></el-input>
              </el-form-item>
              <el-form-item label="银行卡号">
                  <el-input v-model="form.bankcard" style="width: 100%;"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="form.desc"></el-input>
              </el-form-item>
            </div>
            <div v-if="active === 3">
              <div style="height:50px;width:100%"></div>
              <el-form-item label="附加费">
                  <el-input v-model="form.pay" style="width: 100%;"></el-input>
              </el-form-item>
              <el-form-item label="服务费">
                  <el-input v-model="form.pay1" style="width: 100%;"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <el-button style="margin-top: 12px;" @click="prev" v-if="active==1||active==2||active==3">上一步</el-button>
          <el-button style="margin-top: 12px;" @click="next" v-if="active==0||active==1||active==2">下一步</el-button>
          <el-button style="margin-top: 12px;" @click="onSubmit" v-if="active==3">提交</el-button>
        </div>
      </div>  
    </el-col>
  </el-row>
</el-row>
</div>
</div>
</template>

<script>
export default {
  name: "collectionList",
  data() {
      return {
        active: 0,
         form: {
          name: '',
          date1: '',
          date2: '',
          date3: '',
          resource: '',
          username: '',
          idcard: '',
          type: [],
          plan:'',
          area:'',
          base:'',
          money:'',
          bank:'',
          bankname:'',
          bankcard:'',
          desc: '',
          pay:'',
          pay1:''
        }
      };
    },

    methods: {
      next() {
        if (this.active++ > 3) this.active = 0;
      },
      prev() {
        --this.active;
        if (this.active < 0) this.active = 0;
      },
      onSubmit() {
        console.log('submit!');
      }
    }
};
</script>
<style>
.el-step__head.is-success{
  color: #999;
  border-color: #999;
}
.el-step__title.is-success{
  color: #999;
}
</style>>



